<template>
  <div class="text-sm font-bold mb-2 bg-[#7f8c8d] p-2">铁塔信息</div>
  <!-- table -->
  <el-table :data="towers" border class="font-[consolas]" v-if="towers">
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column label="名称" width="100" prop="tName" align="center" />

    <!-- 类型 -->
    <el-table-column label="类型" width="85" align="center">
      <template #default="scope">
        <el-tag type="primary" v-if="scope.row.tStyle === '直线'">{{ scope.row.tStyle }}</el-tag>
        <el-tag type="warning" v-if="scope.row.tStyle !== '直线'">{{ scope.row.tStyle }}</el-tag>
      </template>
    </el-table-column>

    <!-- 塔型 -->
    <el-table-column property="tType" label="塔型">
      <template #default="scope">
        <span class="">{{ scope.row.tType }}</span>
      </template>
    </el-table-column>

    <!-- 转角 -->
    <el-table-column label="转角" width="100">
      <template #default="scope">
        <el-tag type="danger" v-if="scope.row.corner">{{ scope.row.corner }}</el-tag>
      </template>
    </el-table-column>

    <!-- 高程 -->
    <el-table-column label="高程" width="100">
      <template #default="scope">
        <div class="flex items-center">
          <Local theme="outline" size="16" fill="#1abc9c" class="mr-1" />
          <el-text class="flex items-center gap-0.5">
            {{ scope.row.altitude }}
            <span class="text-gray-400 text-xs">m</span>
          </el-text>
        </div>
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column fixed="right" label="操作" width="100" align="center">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="">
          <FileEditingOne theme="outline" size="16" fill="#2c3e50" />
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { FileEditingOne, Local } from '@icon-park/vue-next'
defineProps<{
  towers: TowerModel[] | undefined
}>()
const emit = defineEmits(['closed'])
</script>

<style></style>
